masonry page list CSS variables

code:style.css

:root {

--card-between: 5px;

--line-height-title: 1.3;

--line-height-description: 1.2;

--card-title-description-between: 3px;

--card-padding-x: 5px;

--card-padding-y: 5px;

--card-min-width: calc(var(--card-padding-x) * 2 + max(6em, min(10em, 16vw)));

--card-max-width: calc(var(--card-padding-x) * 2 + max(9em, min(15em, 24vw)));

--card-max-height0: calc(var(--card-min-width) - 6em + 8vh + 2vw);

--card-max-height-min: calc(var(--card-padding-y) * 2 + var(--line-height-title) * 14px + var(--line-height-description) * 12px * 5 + 2px);

--card-max-height: max(var(--card-max-height0), var(--card-max-height-min, 13vh));

--card-match-max-width: calc((100% - var(--card-between) * 2) / 2);

--card-match-max-height: unset;

--relation-label-max-width: var(--card-max-width);

--relation-label-max-height: var(--card-max-width);

--relation-label-match-max-width: 50%;

--relation-label-match-max-height: unset;

--icon-picture-min-width: 147px;

}